//react-redux
import React from 'react'
import PropTypes from 'prop-types'
import {bindActionCreators} from './woniu-redux'
// connect 负责链接组件 给到redux里的数据放到组件的属性中
//1 负责接受一个组件 把state里的一些数据放进去 返回一个组件
//2 数据变化的时候 能够通知组件
//Provider 把store放到context里，所有的子元素都可以直接提取到context
// export function connect(mapStateToProps,mapDispatchToProps) {
//     return function (WrapComponent) {
//         return class ConnectComponent extends React.Component{

//         }
//     }
// }
export const connect=(mapStateToProps=state=>state,mapDispatchToProps={})=>(WrapComponent)=>{
    console.log(mapStateToProps)
    return class ConnectComponent extends React.Component{
        static contextTypes={
            store:PropTypes.object
        }
        constructor(props,context){
            super(props)
            this.state={
                props:{}
            }
        }
        componentDidMount(){
            const {store}=this.context;
            this.update()
            console.log(this.update)
            store.subscribe(()=>this.update())
        }
        update(){
            //获取mapStateToProps mapDispatchToProps放到this,props function (state){ return {num:state}}
            const {store}=this.context;
            const stateProps=mapStateToProps(store.getState());
            //方法不能直接给 需要dispath
            // export function addGun() {
            //     return {type:ADD_GUN}
            // } 直接执行是没有意义的 要addGun=()=>store.dispath(addGun()) 其实就是dispatch把actionCreater包了一层
            const dispatchProps=bindActionCreators(mapDispatchToProps,store.dispatch)
            // console.log(stateProps,this.state.props)
            //这里setState this.state.props要放到前面 才能覆盖
            this.setState(
               {
                   props:{
                ...this.state.props,
                ...stateProps,
                ...dispatchProps,
                
               }
            })

        }
        render(){
            return(
                <WrapComponent {...this.state.props}></WrapComponent>
                
            )
        }
    }
} 


export class Provider extends React.Component{
    static childContextTypes={
        store:PropTypes.object
    }
    getChildContext(){
        return {store:this.store}
    }
    constructor(props,context){
        super(props)
        this.store=props.store
    }
    render(){
        return this.props.children
    }
}
  